1
00:00:00,630 --> 00:00:01,860
Hello and welcome.

2
00:00:01,860 --> 00:00:10,020
In this video we are going to create the javascript functionality for the project.

3
00:00:10,020 --> 00:00:16,970
I have already got a reference to the javascript file inside our hasty email.

4
00:00:17,040 --> 00:00:19,930
Call it call or switch.

5
00:00:19,990 --> 00:00:20,970
Cheers.

6
00:00:21,190 --> 00:00:29,880
So now I have to create the file so I'm going to copy that name and go and click new file and I'm going

7
00:00:29,880 --> 00:00:36,040
to save this inside the same directory as the other two files.

8
00:00:36,270 --> 00:00:44,270
So I'm just going to paste to name calling kolok Switch digits and click C So this file now will be

9
00:00:44,360 --> 00:00:46,020
jaf us creep file.

10
00:00:46,150 --> 00:00:50,510
It's on the bottom right hand corner it says javascript.

11
00:00:50,550 --> 00:01:00,270
I have also already got the code ready for this file here I am add that in and then explain as much

12
00:01:00,270 --> 00:01:01,140
as I like.

13
00:01:01,440 --> 00:01:12,270
So this is the javascript saw from Line want to 4 we've got we are referenced in each of these ideas

14
00:01:12,770 --> 00:01:19,650
which is these ideas here this list items here I am referencing them here use in the documentor get

15
00:01:19,650 --> 00:01:27,090
elemen method and passing in the value of the inside that method.

16
00:01:27,090 --> 00:01:31,210
I'm also attaching a click event on click.

17
00:01:31,230 --> 00:01:38,690
So basically what will happen when you click on each of the button is here.

18
00:01:38,870 --> 00:01:45,540
If you click on the button relating to that it will give you the corresponding function functions have

19
00:01:45,570 --> 00:01:47,360
said that two equals two.

20
00:01:47,640 --> 00:01:49,320
These are the various functions.

21
00:01:49,320 --> 00:01:57,120
For example if you click on this group button it will call the switch gri function which means to switch

22
00:01:57,150 --> 00:01:59,080
the column to grey.

23
00:01:59,370 --> 00:02:05,500
And here if you click on this white button it will call this sweet white function.

24
00:02:05,490 --> 00:02:11,140
Some of these are various functions that would be called in any of this list item.

25
00:02:11,160 --> 00:02:21,210
Click on source here from line 7 to 25 is all we have created the various functions that we are referencing

26
00:02:21,280 --> 00:02:23,200
in this upper part.

27
00:02:23,310 --> 00:02:28,260
So the first function here is the great switch.

28
00:02:28,380 --> 00:02:29,130
Function.

29
00:02:29,370 --> 00:02:36,750
So basically what that does is that when you click on the list item to change the background colour

30
00:02:37,320 --> 00:02:38,420
to grey.

31
00:02:39,030 --> 00:02:41,310
And here you can see the document.

32
00:02:41,400 --> 00:02:50,370
Don't get element by tag name so the tag will be the body as a body attack and the style will be white

33
00:02:50,370 --> 00:03:00,810
or what that means is that a tool changed the background colour of the body tag to agree and also change

34
00:03:00,900 --> 00:03:07,640
any text that is on that page to change it to white.

35
00:03:07,860 --> 00:03:16,790
Okay so that the colours can contrast so this function here is what we are referencing here.

36
00:03:16,950 --> 00:03:23,180
We embedded in grid button is clicked on so we at times on Click event to it.

37
00:03:23,340 --> 00:03:25,840
So the functions are physically the same.

38
00:03:25,840 --> 00:03:26,880
They do the same thing.

39
00:03:26,880 --> 00:03:34,350
This is clie When you click on the white on white button.

40
00:03:34,380 --> 00:03:42,630
Here it all changed the background colour to white and the colour of the text to black.

41
00:03:42,630 --> 00:03:43,950
Same with a switch.

42
00:03:43,950 --> 00:03:44,620
Blue.

43
00:03:44,750 --> 00:03:52,560
It would change the colour to blue background colour to blue and the foreground which is the law of

44
00:03:52,560 --> 00:03:53,190
the text.

45
00:03:53,230 --> 00:03:54,590
Change that to white.

46
00:03:54,630 --> 00:03:56,340
Similar thing to this function.

47
00:03:56,360 --> 00:03:58,040
Here's switch yellow.

48
00:03:58,170 --> 00:04:06,720
Click on the button to change the background colour to yellow and be out for a whole lot of the text

49
00:04:06,930 --> 00:04:07,810
to black.

50
00:04:07,830 --> 00:04:15,630
Some of this function or do similar things your different as the name of the function and also the background

51
00:04:15,630 --> 00:04:18,090
colour or function changes.

52
00:04:18,240 --> 00:04:27,000
So that is basically the javascript functionality sorted and it is to clear farm and save all if you

53
00:04:27,000 --> 00:04:30,040
dont understand any of these options.

54
00:04:30,090 --> 00:04:33,160
I mean this part of the code please to let me know.

55
00:04:33,630 --> 00:04:35,630
So I've got my projects opened.

56
00:04:35,690 --> 00:04:43,560
I'm is going to run the Hayes team file and that should enable us to test their applications so if I

57
00:04:43,560 --> 00:04:55,200
click on this by clicking on this the click method or event will be triggered and it'll call the relevant

58
00:04:55,200 --> 00:04:58,950
function that will switch the background colour to yellow.

59
00:04:59,010 --> 00:04:59,820
I can see that.

60
00:05:00,450 --> 00:05:09,600
I do the same with the blue cause the blue function has to change the background quite angry.

61
00:05:09,690 --> 00:05:13,930
So we've got our application working as designed.

62
00:05:13,980 --> 00:05:17,220
Feel free to add more colours and experiment.

63
00:05:17,430 --> 00:05:18,690
Thanks for watching.

64
00:05:18,690 --> 00:05:19,790
Bye for now.